<template>
  <!-- 只能有一个根标签 -->
  <div>
    <el-table :data="list" style="width: 100%" max-height="300">
      <el-table-column prop="number" label="试题编号" width="250">
      </el-table-column>
      <el-table-column prop="subject" label="学科" width="120">
      </el-table-column>
      <el-table-column prop="catalog" label="目录" width="120">
      </el-table-column>
      <el-table-column prop="questionType" label="题型" width="120">
        <template slot-scope="{ row }">
          {{ getLabel(questionType, +row.questionType, "value", "label") }}
        </template>
      </el-table-column>
      <el-table-column prop="question" label="题干" width="250"
        >a
        <template slot-scope="{ row }">
          <div v-html="row.question"></div>
        </template>
      </el-table-column>
      <el-table-column prop="addDate" label="录入时间" width="250">
      </el-table-column>
      <el-table-column prop="difficulty" label="难度" width="120">
        <template slot-scope="{ row }">
          {{ getLabel(difficulty, +row.difficulty, "value", "label") }}
        </template>
      </el-table-column>
      <el-table-column prop="creator" label="录入人" width="120">
      </el-table-column>
      <el-table-column prop="chkState" label="审核状态" width="120">
        <template slot-scope="{ row }">
          {{ getLabel(chkType, row.chkState + 1, "value", "label") }}
        </template>
      </el-table-column>
      <el-table-column prop="chkRemarks" label="审核意见" width="120">
      </el-table-column>
      <el-table-column prop="creator" label="审核人" width="120">
      </el-table-column>
      <el-table-column prop="publishState" label="发布状态" width="120">
        <template slot-scope="{ row }">
          {{ getLabel(publishType, +row.publishState + 1, "value", "label") }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="{ row }">
          <el-button type="text" size="small" @click="preview(row)"
            >预览</el-button
          >
          <el-button
            type="text"
            size="small"
            :disabled="row.chkState === 0 ? false : true"
            @click="process(row.id)"
            >审核</el-button
          >
          <el-button
            type="text"
            size="small"
            :disabled="row.publishState === 2 ? true : false"
            @click="xiu(row.id)"
            >修改</el-button
          >
          <el-button type="text" size="small" @click="addUp(row, $event)">
            {{ row.publishState === 1 ? "下架" : "上架" }}
          </el-button>
          <el-button
            type="text"
            size="small"
            :disabled="row.publishState === 1"
            @click="del(row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="list.page"
      :page-sizes="[3, 5, 10, 20]"
      :page-size="list.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="list.counts"
    >
    </el-pagination>
    <!-- 审核弹窗 -->
    <el-dialog title="提示" :visible="showDialog" width="30%" @close="btnCanel">
      <div>
        <el-radio v-model="checkData.chkState" label="1">通过</el-radio>
        <el-radio v-model="checkData.chkState" label="2">拒绝</el-radio>
        <p>审核意见:</p>
        <el-row>
          <el-input
            type="textarea"
            placeholder="请输入内容"
            :rows="2"
            resize="none"
            v-model="checkData.chkRemarks"
          >
          </el-input>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="btnCanel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 预览 -->
    <Preview
      :questionItem="previewInfo"
      :previewDialog="previewDialog"
      @previewCanel="previewCanel"
    ></Preview>
  </div>
</template>

<script>
import Preview from './Preview.vue'
import { remove, choiceCheck, choicePublish, detail } from '@/api/hmmm/Xm.js'
import { getLabel } from '../components/Xm/commot'
import {
  chkType,
  difficulty,
  questionType,
  publishType
} from '@/api/hmmm/constants.js'

export default {
  components: {
    Preview
  },
  name: '',
  data () {
    return {
      getLabel, // 数字转文字
      chkType, // 审核
      difficulty, // 难度
      questionType, // 题型
      publishType, // 发布状态
      pageNum: 1,
      pageSize: 5,
      // 审核弹窗值
      checkData: {
        chkState: '1',
        chkRemarks: ''
      },
      checkId: '',
      // 审核弹窗
      showDialog: false,
      // 预览弹窗
      previewDialog: false,
      previewInfo: {}
    }
  },
  created () {},
  props: {
    list: {
      type: Array,
      require: true
    }
  },
  methods: {
    xiu (id) {
      this.$router.push({
        name: 'questions-new',
        query: { id: id }
      })
    },
    //  删除
    async del (id) {
      try {
        await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await remove(id)
        await this.$emit('choice', this.pageSize, this.pageNum)
      } catch (err) {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      }
    },
    // 分页
    handleSizeChange (val) {
      this.pageSize = val
      this.$emit('choice', this.pageSize, this.pageNum)
    },
    handleCurrentChange (val) {
      this.pageNum = val
      this.$emit('choice', this.pageSize, this.pageNum)
    },
    // 审核
    process (id) {
      this.showDialog = true
      this.checkId = id
    },
    // 审核弹窗关闭
    btnCanel () {
      this.showDialog = false
      this.checkData.chkRemarks = ''
    },
    // 审核接口
    async submit () {
      if (this.checkData.chkRemarks.trim().length === 0) {
        return this.$message.warning('请输入审核意见')
      }
      await choiceCheck({
        id: this.checkId,
        chkState: +this.checkData.chkState,
        chkRemarks: this.checkData.chkRemarks
      })
      this.showDialog = false
      await this.$emit('choice', this.pageSize, this.pageNum)
      this.$message.success('审核成功')
    },
    // 上下架
    async addUp (item, e) {
      console.log(e.target.innerText)
      try {
        await this.$confirm(
          '确认要' + e.target.innerText + '这道题目吗?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
        if (item.publishState === 0) {
          await choicePublish({
            id: item.id,
            publishState: 1
          })
        } else {
          await choicePublish({
            id: item.id,
            publishState: 0
          })
        }
        await this.$emit('choice', this.pageSize, this.pageNum)
      } catch (err) {
        this.$message({
          type: 'info',
          message: '已取消' + e.target.innerText
        })
      }
    },
    // 打开弹窗
    async preview (item) {
      const { data } = await detail({ id: item.id })
      this.previewInfo = data
      this.previewDialog = true
    },
    // 关闭预览弹窗
    previewCanel () {
      this.previewDialog = false
    }
  }
}
</script>

<style scoped>
</style>
